<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>内部通知详情</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css?v=1" />
    <style>
        html,
        body {
            background: #F7FBFF;
        }

        .ellipsis_one {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .aui-content {
            background: #fff;
        }

        .text-grey {
            color: #999;
        }

        .imglist_box {
            overflow: hidden;
        }

        .imglist_item {
            width: auto;
            float: left;
            color: #ddd;
            position: relative;
            font-size: 0.65rem;
            margin-bottom: 10px;
        }

        .imglist_item span {
            font-size: 0.65rem;
            padding-top: 5px;
        }

        .imglist_item img {
            width: 4rem;
            height: 4rem;
            margin-right: 15px;
            border-radius: 5px;
        }

        .aui-list,
        .aui-list .aui-list-item {
            background-size: 100% 0px;
            padding-left: 0rem;
        }

        .new-border-bottom {
            border-bottom: solid 0.5px #e5e5e5;
        }

        .label-read {
            margin-right: 10px;
            padding-bottom: 5px;
            border-bottom: solid 1px #fff;
            display: inline-block;
        }

        .active-read {
            border-color: #289FFF;
            color: #289FFF;
        }

        .new-btn-bottom {
            width: 92%;
            margin: 0 auto;
            display: flex;
            margin-top: 60px;
            margin-bottom: 30px;
            flex-direction: row;
            justify-content: center;
        }

        .new-blue-btn {
            width: 50%;
            text-align: center;
            margin: 0 5px;
            height: 44px;
            line-height: 44px;
            color: #fff;
            background: #289FFF;
            box-shadow: 0px 5px 8px 0px rgb(49 127 203 / 32%);
            border-radius: 22px;
        }

        .btn-refuse {
            background: #fff;
            border: solid 1px #289fff;
            color: #289fff;
        }

        .text-greys {
            color: #999 !important;
        }

        .popup-title {
            margin-top: 16px;
            text-align: center;
            margin-bottom: 5px;
        }

        .new-textarea {
            height: 100px;
            border: solid 0.5px #eee;
            border-radius: 4px;
            padding: 5px 10px;
        }

        .new-fles-center {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        ::placeholder {
            color: #999;
            font-size: 0.75rem;
        }

        .right-popup {
            left: unset;
            right: 10px;
            width: 70px;
            text-align: center;
            border-radius: 4px;
            box-shadow: 0px 1px 4px 0px rgb(60 128 209 / 16%);
        }

        .new-btn-text {
            padding: 5px;
            margin: 0 5px;
        }

        .new-btn-text:active {
            color: #289fff;
        }

        .imgboxnew {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #f5f5f5;
            overflow: hidden;
        }

        .imgboxnew img {
            border-radius: unset;
        }

        .aui-grid-label {
            width: 100%;
            height: 40px;
            line-height: 20px;
            text-align: center;
            display: -webkit-box !important;
            overflow: hidden;
        }

        .wenjian_box {
            width: 100%;
            margin-top: 5px;
            overflow: hidden;
        }

        .wenjian_item {
            width: 100%;
            height: 1.6rem;
            line-height: 1.6rem;
            border-radius: 5px;
            background: #F6FBFF;
            margin-bottom: 4px;
        }

        .wj_name {
            width: 80%;
            float: left;
            font-size: 0.75rem;
            padding-left: 10px;
        }

        .wj_delete {
            /* background: #f5f5f5; */
            width: 15%;
            text-align: right;
            padding-right: 10px;
            font-size: 0.75rem;
            color: #289fff;
            float: right;
        }
    </style>
</head>

<body>
    <section id="app" class="" v-cloak>
        <div class="aui-content ">
            <div class="aui-content-padded ">
                <h2>{{form.Title}}</h2>
                <div v-if="form.States==2" class="aui-font-size-12 text-grey aui-margin-t-0">{{form.FinalRealName}} 发布于
                    {{form.PublishTime}}</div>
                <div v-if="form.States==1" class="aui-font-size-12 text-grey aui-margin-t-0">{{form.CreatedName}} 创建于
                    {{form.AddTime}}</div>
                <div class="aui-content aui-margin-t-15" v-html="form.HTMLContent"> </div>
                <div class="aui-margin-t-15">
                    <div class="text-grey">附件信息</div>
                    <div v-if="filelist.length<=0" class="text-grey">无</div>
                    <div v-if="imglist.length>0" class="imglist_box aui-margin-t-10 ">
                        <div v-for="item in imglist" class="imglist_item">
                            <img v-on:click="img_browser(item.local_id)" class="imgitem ml4" :src="item.local_id" />
                        </div>
                    </div>
                    <div v-if="filelist.length>0" class="aui-margin-t-0">

                        <div class="wenjian_box">
                            <div class="wenjian_item" v-on:click="doPreviewFile(item)" v-for="item in filelist">
                                <div class="wj_name ellipsis_one">{{item.FileOriNames}}</div>
                                <div class="wj_delete">
                                    <span>预览</span>
                                </div>
                            </div>
                        </div>



                        <!-- <div v-for="item in filelist" class="text-grey aui-margin-t-0" v-on:click="doPreviewFile(item)">
                            {{item.FileOriNames}}
                            <span style="color: #289fff;">预览</span>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div class="aui-content aui-margin-t-15 aui-margin-b-15">
            <div class="aui-content-padded ">
                <div>
                    <label v-on:click="doChangeRead(true)" class="label-read"
                        v-bind:class="{'active-read':IsReadedCheck}">已读
                        <span v-if="ReadList.length>0">{{ReadList.length}}</span></label>
                    <label v-on:click="doChangeRead(false)" class="label-read"
                        v-bind:class="{'active-read':!IsReadedCheck}">未读 <span
                            v-if="NoReadList.length>0">{{NoReadList.length}}</span></label>
                </div>
                <div>
                    <div v-if="IsReadedCheck" class="aui-content aui-margin-b-15">
                        <ul v-if="ReadList.length>0" class="aui-list aui-media-list">
                            <li v-for="(item,indexread) in ReadList" class="aui-list-item aui-list-item-middle">
                                <div class="aui-media-list-item-inner">
                                    <div class="aui-list-item-media" style="width: 3rem; padding-right: unset;">
                                        <div class="imgboxnew">
                                            <img :src="item.HeadImg?item.HeadImg:'../image/default.png'"
                                                class="aui-img-round aui-list-img-sm">
                                        </div>
                                    </div>
                                    <div class="aui-list-item-inner new-border-bottom">
                                        <div class="aui-list-item-text">
                                            <div class="aui-list-item-title aui-font-size-14">{{item.FinalRealName}}
                                            </div>
                                            <div class="aui-list-item-right text-greys"> {{item.ReplyTime}}</div>
                                        </div>
                                        <div class="aui-list-item-text text-greys">
                                            {{item.ReadDesc}}
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div v-if="!IsReadedCheck">
                        <section v-if="NoReadList.length>0" class="aui-grid aui-margin-t-10">
                            <div class="aui-row">
                                <div v-for="item in NoReadList" class="aui-col-xs-3 aui-margin-r-10"
                                    style="width: 50px;">
                                    <div class="imgboxnew">
                                        <!-- <img src="https://atts.w3cschool.cn/attachments/image/cimg/demo3.png" class="aui-img-round aui-list-img-sm"> -->
                                        <img :src="item.HeadImg?item.HeadImg:'../image/default.png'"
                                            class="aui-img-round aui-list-img-sm">
                                    </div>
                                    <div class="aui-grid-label text-greys aui-ellipsis-2">{{item.FinalRealName}}</div>
                                </div>
                            </div>
                        </section>

                    </div>

                </div>
            </div>
        </div>

        <div v-if="!IsRead&&IDs>0&&form.States==2&&TypeStatus!=1" class="new-btn-bottom">
            <div class="new-blue-btn btn-refuse" v-on:click="doReplay()">回复</div>
            <div class="new-blue-btn " v-on:click="do_getok(0)">确认收到</div>
        </div>

        <div v-if="TypeStatus==1&&form.States==1" class="new-btn-bottom">
            <div class="new-blue-btn " v-on:click="do_release()">发布</div>
        </div>
        <div v-if="TypeStatus==1&&form.States==2" class="new-btn-bottom">
            <div class="new-blue-btn " v-on:click="do_recall()">撤回</div>
        </div>

        <van-popup v-model:show="IsReplay" closeable close-icon="cross" position="bottom" :style="{ height: '300px' }">
            <div class="popup-title">回复信息</div>
            <div style="padding: 10px 20px;">
                <div class="new-fles-center text-grey aui-margin-b-10">
                    <div>回复信息</div>
                    <div>({{ReplayContent.length}}/50)</div>
                </div>
                <div>
                    <textarea v-model="ReplayContent" placeholder="请输入回复信息!" maxlength="50"
                        class="new-textarea"></textarea>
                </div>
            </div>
            <div class="new-blue-btn" v-on:click="do_getok(1)"
                style="width:90%;margin: 0 auto;bottom: 20px;position: absolute;left: 5%;">提交</div>
        </van-popup>

        <van-popup v-model:show="IsShowEdit" position="top" class="right-popup" :overlay="false">
            <div v-if="TypeStatus==1&&form.States==1" v-on:click="do_edit_neibu()"
                class="new-btn-text new-border-bottom">编辑</div>
            <div v-if="TypeStatus==1&&(form.States==1||form.States==2)" v-on:click="do_delete()"
                class="new-btn-text aui-margin-b-5">删除</div>
        </van-popup>
    </section>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript " src="js/neibutz_detail_frm.js"></script>

</html>